<template>
    <div>
        <!--查询条件start --111s-->
        <el-card>
        <el-form :inline="true"
                 :model="query"
                 class="query-form"
                 size="small">
            <!-- <el-form-item>
                <el-button type="primary"
                            icon="el-icon-edit"
                            @click.native="showDialogAddOrEdit(null,null)">添加
                </el-button>
            </el-form-item> -->

            <el-form-item class="query-form-item">
                <el-input v-model="query.commodityname"
                          placeholder="请输入商品名称"
                          prefix-icon="el-icon-search"
                          @keyup.enter.native="onSubmit"
                          clearable></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary"
                           icon="el-icon-refresh"
                           @click="onRest"></el-button>
                <el-button type="primary"
                           icon="el-icon-search"
                           @click="onSubmit">查询</el-button>
            </el-form-item>

        </el-form>
        <!--查询条件end-->
        <!--列表start --->
        <el-table ref="multipleTable"
                  v-loading="loading"
                  :data="list"
                  :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                  @selection-change="handleSelectionChange"
                  border>
            <el-table-column type="selection"
                                width="50"
                                fixed />
            <el-table-column label="序号"
                             prop="commodityicon"
                             align="center"
                             width="50">
                <template slot-scope="scope">
                    {{scope.$index + 1}}
                </template>
            </el-table-column>
            <el-table-column label="商品名称" prop="commodityname" align="center"/>
            <el-table-column label="轮播图"
                             prop="commodityicon"
                             align="center"
                             width="180">
                <template slot-scope="scope">
                    <el-popover v-if="scope.row.commodityicon"
                                placement="right"
                                trigger="hover">
                        <img :src="scope.row.commodityicon"
                             style="width:400px;border-radius:3px;">
                        <img slot="reference"
                             :src="scope.row.commodityicon"
                             style="max-height: 80px;max-width: 50px;border-radius:5px;">
                    </el-popover>
                    <span v-else>-</span>
                </template>
            </el-table-column>
            <el-table-column label="一级分类" prop="topcategoryname" width="150" align="center"/>
            <el-table-column label="二级分类" prop="secondarycategoryname" width="150" align="center"/>
            <el-table-column label="三级分类" prop="thirdcategoryname" width="150" align="center"/>

            <el-table-column label="库存" prop="commoditynum" width="150" align="center"/>
            <el-table-column label="添加时间"
                             width="300"
                             :show-overflow-tooltip="true"
                             align="center">
                <template slot-scope="scope">
                    <i class="el-icon-time"
                       v-if="scope.row.createtime!=null"></i>
                    <span v-if="scope.row.createtime!=null">{{ scope.row.createtime | formatDateStr('yyyy-MM-dd hh:mm:ss') }}</span>
                    <span v-else>无</span>
                </template>
            </el-table-column>

            <el-table-column label="操作"
                             width="150"
                             align="center"
                             fixed="right">
                <template slot-scope="scope">
                    <!-- <el-button type="danger"
                                size="mini"
                                @click.native="handleDel(scope.row.livegoodsid)">删除
                    </el-button> -->
                    <el-button type="primary"
                               size="mini"
                               @click.native="detailForm(scope.$index, scope.row)">查看详情
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--列表end --222e-->

        <!--全选删除start-->
        <!-- <div class="left-container">
            <el-button type="danger"
                        size="small"
                        @click="delGroup()">删除已选</el-button>
            <transition name="el-fade-in-linear">
                <el-button size="small"
                            @click="toggleSelection()"
                            v-show="cancelToggle">取消选择</el-button>
            </transition>
        </div> -->
        <!--全选删除end-->

        <!--分页模块start-->
        <el-pagination class="pagination-container"
                       background
                       :page-size="query.pageSize"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       layout="total,sizes,prev, pager, next, jumper"
                       :current-page="query.currentPage"
                       :page-sizes="[5,10, 20, 30, 50]"
                       :total="totalNumber"></el-pagination>
        <!--分页模块end-->

        <!--查看弹框-->
        <el-dialog
            title="查看详情"
            :visible.sync="detailVisible"
            :before-close="hideDetailForm"
            width="50%"
            top="5vh"
            v-dialogDrag
            :close-on-click-modal="false"
        >
        <template slot="title">
        <div class="avue-crud__dialog__header">    
            <span class="el-dialog__title">
            <span style="display:inline-block;background-color: #3478f5;width:3px;height:20px;margin-right:5px; float: left;margin-top:2px"></span>
              查看详情
            </span>
          <div class="avue-crud__dialog__menu" >
            <!-- <i class="el-icon-full-quanping"></i> -->
            <icon-svg icon-class="quanping" /> 
            <span  class="mention">双击全屏</span>
          </div>
        </div>
      </template>
      
            <el-card>
            <el-form :model="formData" label-width="140px">           
                <el-form-item label-width="80px" label="基本参数" style="background: #e1e1e1"/>
                <el-form-item label="商品名称：">
                    <span>{{formData.commodityname}}</span>
                    <!-- <input v-model="formData.commodityname" type="text" readonly> -->
                </el-form-item>
                <el-form-item label="商品分类：">
                    <span>{{formData.topcategoryname+","+formData.secondarycategoryname+","+formData.thirdcategoryname}}</span>
                </el-form-item>

                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">

                    <el-form-item label="代理价：" style="width:30%;display: inline-block;">
                        <input v-model="formData.commodityoldprice" type="text" readonly>
                    </el-form-item>
                    <el-form-item label="零售价：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="formData.commodityprice" type="text" readonly>
                    </el-form-item>

                </el-form-item>

                <!-- <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">

                    <el-form-item label="快递：" style="width:30%;display: inline-block;">
                        <span>{{formData.postagetype=='0'? '包邮':'不包邮'}}</span>
                    </el-form-item>
                    <el-form-item label="发货地：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="formData.commodityfrom" type="text" readonly>
                    </el-form-item>

                </el-form-item> -->

                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">
                    <el-form-item label="添加时间：" style="width:30%;display: inline-block;">
                        <input
                            :value="formData.createtime |formatDateStr('yyyy-MM-dd') "
                            type="text"
                            readonly
                        >
                    </el-form-item>
                    <el-form-item label="商品ID：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="formData.commodityid" type="text" readonly>
                    </el-form-item>

                </el-form-item>

                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">

                    <el-form-item label="商品评论:" style="width:30%;display: inline-block;">
                        <el-button @click="lookcomment(formData.commodityid)">查看</el-button>
                    </el-form-item>
                    <!-- <el-form-item label="上架:" style="margin-left:80px; width:30%;display: inline-block;">
                        <div>
                            <el-switch
                                v-model="formData.onshelfstatus"
                                active-color="#13ce66"
                                inactive-color="#ff4949"
                                active-value='2'
                                inactive-value='1'
                                @change="onshelfschange(formData)"
                            >
                            </el-switch>
                        </div>

                    </el-form-item> -->

                </el-form-item>

                <!--    <el-form-item label="视频:" style="width:30%;display: inline-block;">
                       <div  v-if="formData.videopic">
                           <video style="width: 200px;height: auto" :src="formData.videopic" controls='controls'>
                               您的浏览器不支持 video 标签。
                           </video>
                       </div>
                    </el-form-item>-->

                <el-form-item style="border-bottom:1px solid #ebeef5;" label-width="0px">
                    <el-form-item label="封面图：" style="width:30%;display: inline-block">
                        <!--<img :src="formData.userpic" alt style="width: 60px;height: 50px">-->
                        <el-popover v-if="formData.commodityicon" placement="right" trigger="hover">
                            <img :src="formData.commodityicon" style="width:400px;border-radius:3px;">
                            <img
                                slot="reference"
                                :src="formData.commodityicon"
                                style="max-height: 80px;max-width: 50px;border-radius:5px;"
                            >
                        </el-popover>
                        <span v-else>-</span>

                    </el-form-item>

                    <el-form-item label="库存：" style="margin-left:80px; width:30%;display: inline-block;">
                        <input v-model="formData.commoditynum" type="text" readonly>
                    </el-form-item>
                </el-form-item>
                <el-form-item label-width="80px" label="规格参数" style="background: #e1e1e1">
                </el-form-item>
                <el-table
                    ref="multipleTable"
                    v-loading="loading"
                    :data="parameterlist"
                    :header-cell-style="{background:'#F4F4F5',color:'#606266'}"
                    @selection-change="handleSelectionChange"
                    border
                >
                    <!--     <el-table-column type="selection" width="50" fixed/>-->
                    <!--    <el-table-column label="序号" prop="commodityid" width="50" align="center"></el-table-column>-->
                    <el-table-column label="商品图片" width="250"  align="center">
                        <template slot-scope="scope">
                            <el-popover v-if="scope.row.inventorypic" placement="right" trigger="hover">
                                <img :src="scope.row.inventorypic" style="width:400px;border-radius:3px;">
                                <img
                                    slot="reference"
                                    :src="scope.row.inventorypic"
                                    style="max-height: 80px;max-width: 50px;border-radius:5px;"
                                >
                            </el-popover>
                            <span v-else>-</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="规格参数" align="center">
                        <el-table-column v-for="(item,index) in inputData" :key="index" :label='item.key' width="250" align="center">
                            <template slot-scope="scope">
                                <div v-if="scope.row.splist!==undefined">
                                    <el-select v-model="scope.row.splist[index]" placeholder="请选择" disabled  ref="sel" >
                                        <el-option
                                            v-for="(it,ind) in (item.val.split(','))"
                                            :key="ind"
                                            :label="it"
                                            :value="it">
                                        </el-option>
                                    </el-select>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table-column>

                    <el-table-column label="价格" prop="primaryagentprice"  align="center"/>
                    <el-table-column label="库存" prop="inventorynum"  align="center"/>
                </el-table>
                <el-form-item label-width="65px" label="轮播图" style="background: #e1e1e1;margin-top:20px">
                </el-form-item>
                <el-form-item >

                    <div v-for="(item,index) in formData.commoditypiclist" :key="index" style="display:inline-block;">
                        <img :src="item" style="width:200px;height:auto;border-radius:3px;margin-left: 5px;">
                    </div>


                </el-form-item>
                <el-form-item label-width="80px" label="商品详情" style="background: #e1e1e1;margin-top:20px" />
                
                    <span v-html="formData.commoditydesc" style="margin-left:10%;display:block;"></span>
               
            </el-form>
            </el-card>
        </el-dialog>
       </el-card>

    </div>
</template>
<script>
import { platformCommodityList } from "../../api/broadcastCommodity/broadcastCommodity.js";
import { BASE_URL } from "../../config/app";
/*用作表单的数据初始化*/
const formJson = {
    ids: "",
    userId: ""
};

export default {
    components: {},
    data() {
        return {
            uploadData: [],
            query: {
                currentPage: 1,
                commodityname: "",
                content: "",
                pageSize: 5
            },
            formName: null,
            formMap: {
                add: "添加",
                edit: "编辑"
            },
            list: [], //列表集合
            parameterlist: [], //add参数list
            inputData: [], // 循环创建input存值
            totalNumber: 0, //分页总页数
            loading: true, //列表加载载
            formData: formJson, //新增或修改的对象
            detailVisible: false // 查看窗口
        };
    },

    methods: {
        //查看商品的评论
        lookcomment(id){
             this.$router.push({
                path: "/merchant/comment",
                query: { cid: id },
            });
        },
        handleSelectionChange() {},
        handleSizeChange(val) {
            this.query.pageSize = val;
            this.platformCommodityList();
        },
        handleCurrentChange(val) {
            this.query.currentPage = val;
            this.platformCommodityList();
        },

        /*获取列表事件*/
        platformCommodityList() {
            this.loading = true;
            //   getTopList
            platformCommodityList(this.query)
                .then(response => {
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        this.loading = false;
                        return false;
                    }
                    console.log(response);
                    this.list = response.data.list || [];
                    this.totalNumber = response.data.totalNumber || 0;
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                })
                .catch(() => {
                    this.loading = false;
                    this.list = [];
                });
        },

        /*列表查询条件事件*/
        onSubmit() {
            this.query.currentPage = 1;
            if (this.query.commodityname != "") {
                this.query.content = this.query.commodityname;
            }
            this.platformCommodityList();
        },

        /*刷新*/
        onRest() {
            //刷新事件需要重置查询条件
            this.query = {
                currentPage: 1,
                pageSize: 5
            };
            this.platformCommodityList();
        },

        //显示 查看弹框
        detailForm(index, row) {
            this.detailVisible = true;
            if (row !== null) {
                this.inputData = [];
                this.formData = Object.assign({}, row);
                this.formData.secondarycategoryid = row.secondarycategoryid;
                this.formData.thirdcategoryid = row.thirdcategoryid;
                let id = row.warehouseid;
                this.formData.warehouseid = id;
                let postagetype = row.postagetype + "";
                this.formData.postagetype = postagetype;
                // this.formData.commoditytype=row.commoditytype+"";
                if (
                    row.inventorylist != null &&
                    row.inventorylist[0].inputdata != null
                ) {
                    this.inputData = JSON.parse(row.inventorylist[0].inputdata);
                } else {
                    let data = {
                        key: "",
                        val: ""
                    };
                    this.inputData.push(data);
                }
            }
            let data = [];
            let pic = [];
            let vdata = [];
            let vpic = [];
            for (let i = 0; i < row.commoditypiclist.length; i++) {
                let picdata = row.commoditypiclist[i];
                if (picdata.recoursetype === 0) {
                    let obj = {
                        name: "",
                        url: ""
                    };
                    obj.name = i;
                    obj.url = picdata.picurl;
                    data.push(obj);
                    pic.push(picdata.picurl);
                }
                if (picdata.recoursetype === 1) {
                    let obj = {
                        name: "",
                        url: ""
                    };
                    obj.name = i;
                    obj.url = picdata.picurl;
                    vdata.push(obj);
                    vpic.push(picdata.picurl);
                }
            }

            this.formData.videopic = vpic;
            this.vuploadData = vdata;
            this.commoditypiclist = pic;
            this.formData.commoditypiclist = pic;
            this.uploadData = data;

            this.parameterlist = row.inventorylist;
            for (let i = 0; i < this.parameterlist.length; i++) {
                let sav = [];
                this.$set(this.parameterlist[i], "savparameterlist", sav);
                this.$set(this.parameterlist[i], "splist", sav);

                var a = this.parameterlist[i].inventory.indexOf("}");
                var b = this.parameterlist[i].inventory.substring(1, a);
                var a1 = b.split(",");
                var splist1 = [];
                for (let c = 0; c < a1.length; c++) {
                    var s = a1[c]
                        .split(":")[1]
                        .substring(1, a1[c].split(":")[1].length - 1);
                    splist1.push(s);
                }
                this.parameterlist[i].splist = splist1;
                this.parameterlist[i].savparameterlist = JSON.parse(
                    this.parameterlist[i].secinventory
                );

                this.parameterlist[i].companytype = this.parameterlist[
                    i
                ].companytype.toString();
            }
            //参数
            let sav = [];
            if (this.parameterlist != null && this.parameterlist.length > 0) {
                for (let i = 0; i < this.parameterlist.length; i++) {
                    let pdata = JSON.parse(this.parameterlist[i].secinventory);

                    console.info(pdata);

                    for (let i = 0; i < pdata.length; i++) {
                        let mdata = pdata[i];
                        for (let v in mdata) {
                            sav.push(mdata[v].toString());
                        }
                    }
                    this.parameterlist.savparameterlist = pdata;
                }
                this.parameterlist.splist = sav;
            }
            this.formName = "detail";
        },

        hideDetailForm() {
            // 更改值
            this.detailVisible = !this.detailVisible;
            return true;
            //隐藏弹框时需要清除弹框内容
            if (this.$refs["ruleForm"]) {
                this.$refs["ruleForm"].resetFields(); //清除formData表单
                this.$refs["ruleForm"].clearValidate(); //清除表单验证
            }
        }
    },
    created() {
        this.platformCommodityList();
    }
};
</script>
